<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>节流练习</title>
        <script type="text/javascript" src="../../day6jquery/jquery3.5.min.js" ></script>
        <style type="text/css">
        body{
            background-color: #f4f4f4;
        }
        .con{

            width: 1190px;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
        }
        .item{
            float: left;
            width: 230px;
            height: 322px;
            margin-left: 10px;
            background: #fff;
            margin-bottom: 10px;
        }
        .item:nth-child(5n+1){
            margin-left: 0px;
        }
        .detail_btn{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .img_con{
            display: block;
            width: 150px;
            height: 150px;
            margin: 30px auto 40px;
        }
        .img_con>img{
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
        }
        .mess{
            line-height: 24px;
            padding: 0 20px;
            height: 65px;
            height: 48px;
            font-size: 14px;
            line-height: 24px;
            color: #666;
            text-align: left;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .price_con{
            margin-top: 10px;
            padding: 0 20px;
        }
        .price_con i{
            vertical-align: middle;
            font-size: 12px;
            font-weight: 700;
            line-height: 18px;
            height: 18px;
            color: #e1251b;
            font-style:normal
        }
        .price{
            font-size: 20px;
            font-weight: 700;
            color: #e1251b;
        }
        .price_det{
            font-size: 12px;
            color: #e1251b;
        }

        .loading{
            width: 1190px;
            height: 60px;
            margin: 0 auto;
            display: none;
        }
        .show{
            display: block;
        }
        .loading img{
            display: block;
            width: 40px;
            height: 40px;
            margin: 0 auto;
            transition:all .3s;
            -webkit-animation: rotate 3s linear infinite;
            -moz-animation: rotate 3s linear infinite;
            -o-animation: rotate 3s linear infinite;
            animation: rotate 3s linear infinite;
        }

        @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
            to{-webkit-transform: rotate(360deg)}
        }
        @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
            to{-moz-transform: rotate(359deg)}
        }
        @-o-keyframes rotate{from{-o-transform: rotate(0deg)}
            to{-o-transform: rotate(359deg)}
        }
        @keyframes rotate{from{transform: rotate(0deg)}
            to{transform: rotate(359deg)}
        }
                </style>
    </head>
    <body>

    <div class="con">
        <!-- <div class="item">
            <a class="detail_btn">
                <div class="img_con">
                    <img src='img.png' />
                </div>
                <div class="mess">
                    玛斯梵尼 男士卫衣运动套装男棉衣服运动服饰跑步健身服休闲服运动裤圆领短裤短袖t恤男夏天8XL大码男装 2088 短裤二件套 黑/灰 XL(125-140斤)
                
                </div>

                <div class="price_con">
                    <i>¥</i>
                    <span class="price">
                        166<span class="price_det">.00</span>
                    </span>
                </div>
            </a>
        </div> -->

    </div>
    <div class="loading">
        <img src='loading.png' />
    </div>


    <script type="text/javascript">
      

        var con=document.querySelector('.con');
        function appChild(){
            var listHtml='';
            for(var i=1;i<=5;i++){
                listHtml+='<div class="item">'
                + '<a class="detail_btn">'
                    + '<div class="img_con">'
                + (i% 2 === 0 ? '<img src="img1.png" />' : '<img src="img2.png" />')
                + '</div>'
                + '<div class="mess">'
                + '玛斯梵尼 男士卫衣运动套装男棉衣服运动服饰跑步健身服休闲服运动裤圆领短裤短袖t恤男夏天8XL大码男装 2088 短裤二件套 黑/灰 XL(125-140斤)'
                + '</div>'

                + '<div class="price_con">'
                    + ' <i>¥</i>'
                    + '<span class="price">'
                        + ' 166<span class="price_det">.00</span>'
                    + ' </span>'
                + '</div>'
                + '</a>'
                + '</div>'
            }
            // con.innerHTML=listHtml
            $('.con').append(listHtml); 
        }
        appChild();

        function throttle(fn,delay){
            let valid = true
            return function(){
                if(!valid){
                    return false 
                }
                valid = false
                setTimeout(() => {
                    fn()
                    valid = true;
                }, delay)
            }
        }
        function showTop () {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var conHeight=con.offsetHeight;
            var conTop = con.offsetTop;
            console.log('滚动条位置：',scrollTop );
            console.log('滚动条位置：',window.pageYOffset);
            console.log('con的高度：',conHeight,conTop);
            console.log('clientHeight文档可视区域====：',document.documentElement.clientHeight);
            console.log('内容可视区域的高度加上溢出（滚动）的距离====：',document.documentElement.scrollHeight);
           
            // if(conHeight+conTop-window.pageYOffset<=document.documentElement.clientHeight){
            //     console.log('到底部了',conHeight+conTop,window.pageYOffset,document.documentElement.clientHeight)
            // }

            if(conHeight+window.pageYOffset>=document.documentElement.scrollHeight){
                console.log('到底部了',conHeight+conTop,window.pageYOffset,document.documentElement.clientHeight);
                // $('.loading').css({"display":"block"});
                $('.loading').addClass('show');

                setTimeout(() => {
                    // $('.loading').css({"display":"none"});
                    $('.loading').removeClass('show');
                    appChild();
                }, 1500)
            }

            // element.scrollHeight - element.scrollTop === element.clientHeight
        }
        // window.onscroll = throttle(showTop,1000) 
        document.addEventListener('scroll',throttle(showTop,1000))

$(function(){
    $(window).scroll(function(){
    　　var scrollTop = $(this).scrollTop();
    　　var scrollHeight = $(document).height();
    　　var windowHeight = $(this).height();
    　　if(scrollTop + windowHeight == scrollHeight){
        　console.log("已经到最底部了！");
    　　}
    });
})
         

   </script>
    </body>
</html>